<template>
    <div id="info">
        <a href="javascript:void(0);" class="weui_panel_ft">
            <span></span>
            <span>行业资讯</span>
            <span></span>
        </a>
        <div class="zixun">
            <router-link class="zixunItem" to="/home/info/list">
                <div>
                    <img src="http://shangrongfintech.com/static/images/guonei.png?v=3" alt="" />                    
                    <p>国内资讯</p>
                </div>
                <div>
                     <p>乐享宝投资的一些......</p>
                    <p><span>2017-12-01 17:14:35 </span> <span class="chakan"><i> </i> 18888</span></p>
                </div>
            </router-link>
            <router-link class="zixunItem" to="/home/info/list">
                <div>
                <img src="http://shangrongfintech.com/static/images/xianggang.png?v=3"  alt="" />                    
                    <p>香港资讯</p>
                </div>
                <div>
                     <p>乐享宝投资的一些......</p>
                    <p><span>2017-12-01 17:14:35 </span> <span class="chakan"><i> </i> 1888</span></p>
                </div>
            </router-link>
            <router-link class="zixunItem" to="/home/info/list">
                <div>
                    <img src="http://shangrongfintech.com/static/images/guoji.png?v=3"  alt="" />
                    <p>国际金融</p>
                </div>
                <div>
                     <p>乐享宝投资的一些......</p>
                    <p><span>2017-12-01 17:14:35 </span> <span class="chakan"><i> </i> 1888</span></p>
                </div>
            </router-link>
            <router-link class="zixunItem" to="/home/info/list">
                <div>
                <img src="http://shangrongfintech.com/static/images/qiye.png?v=3"  alt="" />                     
                    <p>企业金融</p>
                </div>
                <div>
                    <p>乐享宝投资的一些......</p>
                    <p><span>2017-12-01 17:14:35 </span> <span class="chakan"><i> </i> 1888</span></p>
                </div>
            </router-link>
        </div>
    </div>
</template>
<script>
</script>
<style scoped>
#home{
    
}
.weui_panel_ft {
  height: 1.4rem;
  font-size: 0.6rem;
  display: flex;
  flex-direction: row;
  background: #f7f7f7;
  padding: 0 0.5rem;
}

.weui_panel_ft span:nth-child(1) {
  flex: 1;
  background: url(/src/assets/img/public/ellipse-2.png) no-repeat center center;
  background-size: 50%;
}

.weui_panel_ft span:nth-child(2) {
  flex: 3;
  font-size: 0.8rem;
  line-height: 1.5rem;
  color: #333;
}

.weui_panel_ft span:nth-child(3) {
  font-size: 0.7rem;
  flex: 10;
  text-align: right;
  color: #999;
  line-height: 1.4rem;
}

.weui_panel_ft span:nth-child(3) i {
  display: inline-block;
  width: 0.6rem;
  height: 100%;
  vertical-align: middle;
  background: url(/src/assets/img/public/jiantou.png) no-repeat center center;
  background-size: 45%;
}

.zixun {
  width: 100%;
  box-sizing: border-box;
  background: #f5f5f5;
  margin-bottom: 4rem; 
  padding: 0 .5rem .5rem .5rem;
}
.zixunItem{
    box-sizing: border-box;
    display: block;
    width: 93vw;
    height: 13vh;
    margin: .4rem auto;
    display: flex;
    flex-direction: row;
    background: #FFF;
}
.zixunItem>div:nth-child(1){
    box-sizing: border-box;
    padding: .4rem 0;
    text-align: center;
    width: 28vw;
    height: 14vh;
}
.zixunItem>div:nth-child(2){
    width: 70vw;
    display: flex;
    flex-direction: column;
    padding: .5rem 0;
}
.zixunItem>div:nth-child(2)>p:nth-child(1){
    flex: 3;
    font-size: 13px;
}
.zixunItem>div:nth-child(2)>p:nth-child(2){
    font-size: 10px;
    flex: 1;
    position: relative;
}
.zixunItem>div>img{
    width: 13vw;
}
.zixunItem>div>p{
    font-size: 13px;
}
.chakan{
    display: block;
    position: absolute;
    top:0;
    right: 10px;
    line-height: 17px;
}
.chakan>i{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: url(http://shangrongfintech.com/static/images/chakan.png) no-repeat center center;
    background-size: 90%;
    vertical-align: middle;
}
</style>
